<template>
	<view class="">
		<!-- 分类选项卡 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }"
				@click="switchTab(index)">
				<text>{{ tab.name }}</text>
				<view class="tab-line" v-if="currentTab === index"></view>
			</view>
		</view>

		<view class="container">
			<!-- 搜索框 -->
			<view class="search-box">
				<view class="search-input">
					<text class="search-icon">🔍</text>
					<input type="text" placeholder="搜索待办事项" v-model="searchText" @input="handleSearch" />
				</view>
			</view>

			<!-- 待办列表 -->
			<scroll-view scroll-y class="todo-list" v-if="filteredTodos.length > 0">
				<view class="todo-item" v-for="(item, index) in filteredTodos" :key="index" @click="viewDetail(item)">
					<image class="item-image" :src="item.icon" mode="aspectFill"></image>
					<view class="item-content">
						<text class="item-title">{{ item.title }}</text>
						<text class="item-desc">{{ item.description }}</text>
						<view class="item-footer">
							<text class="todo-status" :class="getStatusClass(item.status)">{{ item.status }}</text>
							<view class="item-actions">
								<!-- <text class="action-icon share" @click.stop="remindMe(item)">&#xe601;</text> -->
								<text class="iconfont action-icon delete" @click.stop="deleteItem(item)">&#xe615;</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 空状态 -->
			<view class="empty-state" v-else>
				<image src="/static/empty-state.png" class="empty-image"></image>
				<text class="empty-text">暂无待办事项</text>
				<button class="browse-btn" @click="goHome">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选项卡数据
				tabs: [{
						name: '全部',
						status: 'all'
					},
					{
						name: '待处理',
						status: '待处理'
					},
					{
						name: '已完成',
						status: '已完成'
					},
					{
						name: '已过期',
						status: '已过期'
					}
				],
				currentTab: 0,
				searchText: '',
				// 待办数据
				todos: [{
						id: 1,
						title: '预约体检',
						description: '2025/03/20 上午9:30',
						status: '待处理',
						icon: '/static/index/yuyue.png',
						type: 'appointment'
					},
					{
						id: 2,
						title: '复诊提醒',
						description: '2025/03/25 下午2:00',
						status: '待处理',
						icon: '/static/index/yuyue.png',
						type: 'appointment'
					},
					{
						id: 3,
						title: '缴费提醒',
						description: '¥230.00 待支付',
						status: '待处理',
						icon: '/static/index/yuyue.png',
						type: 'payment'
					},
					{
						id: 4,
						title: '血压监测',
						description: '今日已完成',
						status: '已完成',
						icon: '/static/index/yuyue.png',
						type: 'health'
					},
					{
						id: 5,
						title: '取药提醒',
						description: '2025/03/15 已取药',
						status: '已完成',
						icon: '/static/index/yuyue.png',
						type: 'medicine'
					},
					{
						id: 6,
						title: '定期检查',
						description: '2025/03/01 上午10:00',
						status: '已过期',
						icon: '/static/index/yuyue.png',
						type: 'appointment'
					}
				]
			}
		},
		computed: {
			// 过滤后的待办列表
			filteredTodos() {
				return this.todos.filter(item => {
					// 根据选项卡筛选
					const tabFilter = this.currentTab === 0 || item.status === this.tabs[this.currentTab].status;
					// 根据搜索文本筛选
					const searchFilter = this.searchText === '' ||
						item.title.includes(this.searchText) ||
						item.description.includes(this.searchText);

					return tabFilter && searchFilter;
				});
			}
		},
		methods: {
			// 切换选项卡
			switchTab(index) {
				this.currentTab = index;
			},
			// 处理搜索
			handleSearch() {
				// 搜索逻辑已在计算属性中实现
			},
			// 查看详情
			viewDetail(item) {
				console.log('查看详情:', item.title);
				// 根据类型跳转到不同页面
				let url = '';
				switch (item.type) {
					case 'appointment':
						url = `/pages/appointment/detail?id=${item.id}`;
						break;
					case 'payment':
						url = `/pages/payment/detail?id=${item.id}`;
						break;
					case 'health':
						url = `/pages/health/record?id=${item.id}`;
						break;
					case 'medicine':
						url = `/pages/medicine/detail?id=${item.id}`;
						break;
					default:
						url = `/pages/todo/detail?id=${item.id}`;
				}

				if (url) {
					uni.navigateTo({
						url
					});
				}
			},
			// 提醒我
			remindMe(item) {
				console.log('提醒:', item.title);
				uni.showToast({
					title: '已设置提醒',
					icon: 'success'
				});
			},
			// 删除项目
			deleteItem(item) {
				console.log('删除:', item.title);
				uni.showModal({
					title: '确认删除',
					content: `确定要删除"${item.title}"待办事项吗？`,
					success: (res) => {
						if (res.confirm) {
							// 删除项目逻辑
							this.todos = this.todos.filter(todo => todo.id !== item.id);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			// 返回首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// 获取状态样式类
			getStatusClass(status) {
				if (status === '待处理') {
					return 'status-pending';
				} else if (status === '已完成') {
					return 'status-done';
				} else {
					return 'status-expired';
				}
			}
		},
		onPullDownRefresh() {
			// 下拉刷新，重新获取待办事项
			// this.fetchTodoItems()
			// 模拟请求延迟
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style>
	/* 容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 选项卡样式 */
	.tabs {
		display: flex;
		height: 80rpx;
		width: 100%;
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
		position: sticky;
		/* 新增属性，实现吸顶效果 */
		top: 0;
		/* 新增属性，固定在顶部 */
		z-index: 1;
		/* 新增属性，确保在其他内容之上 */
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tab-item text {
		font-size: 28rpx;
		color: #666666;
	}

	.tab-item.active text {
		color: #2979ff;
		font-weight: bold;
	}

	.tab-line {
		position: absolute;
		bottom: 0;
		width: 60rpx;
		height: 4rpx;
		background-color: #2979ff;
		border-radius: 2rpx;
	}

	/* 搜索框样式 */
	.search-box {
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}

	.search-input {
		display: flex;
		align-items: center;
		height: 70rpx;
		background-color: #f5f5f5;
		border-radius: 35rpx;
		padding: 0 30rpx;
	}

	.search-icon {
		margin-right: 10rpx;
		font-size: 28rpx;
	}

	.search-input input {
		flex: 1;
		height: 70rpx;
		font-size: 28rpx;
	}

	/* 待办列表样式 */
	.todo-list {
		flex: 1;
		background-color: #ffffff;
	}

	.todo-item {
		display: flex;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.item-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	.item-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.item-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.item-desc {
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.item-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.todo-status {
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}

	.status-pending {
		color: #ff9900;
		background-color: #fff9f0;
	}

	.status-done {
		color: #52c41a;
		background-color: #f6ffed;
	}

	.status-expired {
		color: #ff5a5f;
		background-color: #fff0f0;
	}

	.item-actions {
		display: flex;
	}

	.action-icon {
		margin-left: 30rpx;
		font-size: 36rpx;
		color: #999999;
	}

	.action-icon.share {
		color: #2979ff;
	}

	.action-icon.delete {
		color: #ff5a5f;
	}

	/* 空状态样式 */
	.empty-state {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999999;
		margin-bottom: 30rpx;
	}

	.browse-btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
		background-color: #2979ff;
		border-radius: 35rpx;
	}
</style>